<template>
  <div class="tw-bg-white tw-w-280 tw-h-678">
    <div class="flex-column-center  tw-pb-10" style="border-bottom: 1px solid #f4f4f4;">
      <p class=" font-normal text-center tw-text-[#171920] tw-pt-8" style=" font-weight: bold;line-height: 34px">
        扫码添加客服微信
      </p>
      <img alt="" class="tw-w-84 tw-h-84" :src="store.state.customerImg"/>
    </div>
    <div class="flex-column tw-items-center  te-mt-12" style="height: 109px;">
      <p class=" " style="line-height: 34px;font-size: 16px;color: #171920;font-weight: bold;">
        距{{ dayjs(configIndex.examStartDate).format("YYYY") }}年{{
          configIndex.courseTypeName
        }}还有
      </p>
      <div class="flex-center tw-mt-6">
        <p
            v-for="(item, index) in JSON.stringify(date)"
            :key="item"
            class="exam-day flex-all-center font-black tw-mx-3 tw-font-semibold"
        >
          {{ item }}
        </p>
        <span class="font-normal tw-font-medium tw-leading-[69px]">天</span>
      </div>
    </div>
    <div>
      <progress-bar :listFlow="listFlow" @goNewsInfo="goNewsInfo"> </progress-bar>
    </div>
  </div>
</template>

<script setup>
import {ref, watch} from "vue";
import ProgressBar from "@/views/course/component/progress-bar.vue";
import dayjs from "dayjs";
import {useStore} from 'vuex';
import {useRouter} from "vue-router";

const router = useRouter();
const store = useStore();
let props = defineProps({
  listFlow: {
    type: Array,
    default: [],
  },
  configIndex: {
    type: Object,
    default: {},
  },
});
let date = ref(0);
watch(
    () => props.configIndex,
    (val, nal) => {
      let startDay = dayjs();
      date.value = dayjs(val.examStartDate).diff(startDay, "day");
      date.value+=1
    },
);
function goNewsInfo(id) {
  console.log(id)
  const resolve = router.resolve({
    path: "/article/info",
    query: {
      id: id,
    },
  });
  const {href} = resolve;
  window.open(href, "_blank");
}
</script>

<style lang="scss" scoped>
.exam-day {
  background: #ffffff;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #ebebeb;
  color: #04addb;
  text-align: center;
  display: inline-block;
  width: 34px;
  height: 46px;
  line-height: 46px;
  font-size: 42px;
  font-family: Arial;
}
</style>
